<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的社群</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <style>
        .data-loading,.data-end{
            font-size:16px;
        }
        article {
            width: 100%;
            background: #efeff4;
            font-size: 0;
        }
        h3 {
            font-size: .3rem;
            height: .75rem;
            line-height: .75rem;
            color: #fff;
            background: #ff9900 ;
            text-align: center;
            position: relative;
        }
        h3 a{
            display: inline-block;
            position: absolute;
            height: .75rem;
            width: .7rem;
            left: 0;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/new_sj.png{$Think.config.RESOURCE_VER}) center center no-repeat;
            background-size: .17rem .32rem;
        }
        .top {
            text-align: center;
            background-color: #fff;
            position: relative;
        }
        .top > img {
            margin: .2rem 0;
            width: 1rem;
            height: 1rem;
        }
        .top > a {
            position: absolute;
            right: .3rem;
            top: .3rem;
            display: inline-block;
            height: .3rem;
        }
        .top a img {
            width: .3rem;
            height: .3rem;
        }
        .top p{
            font-size: .26rem;
            color: #ff9900;
            text-align: center;
            height: .3rem;
            line-height: .3rem;
            position: relative;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
        }
        .top p em {
            font-size: 14px;
        }
        .top p i {
            display: inline-block;
            min-width: 24px;
            color: #ff9900;
            border-radius: 6px;
            border: 1px solid #ff9900;
            font-size: 12px;
            text-align: center;
            height: 12px;
            line-height:12px;
            margin-left: 6px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        @media screen and (max-width: 320px) and (min-width: 640px){
            .top p span {
                padding: .1rem .05rem 0;
            }
        }
        .top > ul li {
            margin: .3rem 0;
            width: 50%;
            font-size: .26rem;
            display: inline-block;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .top > ul li:first-child {
            border-right: 1px solid #ccc;
        }
        .top > ul li p {
            color: #757575;
            margin-bottom: .1rem;
        }
        .top > ul li em {
            font-size: .4rem;
            color: #ff9900;
        }
        .top > div a,.top > div span {
            display: inline-block;
            font-size: .3rem;
            color: #fff;
            background-color: #ff9900;
            height: .7rem;
            line-height: .7rem;
            width: 2.7rem;
            text-align: center;
            border-radius: .05rem;
        }
        .top > div a:first-child {
            margin-right: .4rem;
        }
        .btn {
            text-align: justify;
            padding: 0 .3rem;
            padding-bottom: .3rem;
        }
        article > p {
            text-align: center;
            font-size: .26rem;
            color: #000;
            font-weight: 600;
            height: .5rem;
            line-height: .5rem;
        }
        .con {
            background-color: #fff;
        }
        .con p span {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0 .5rem;
            color: #009ddf;
            font-size: .24rem;
            display: inline-block;
            width: 50%;
            height: .6rem;
            line-height: .6rem;
            border-bottom: 1px solid #ccc;
        }
        .con span.fr {
            text-align: right;
        }
        .con ul li {
            padding-right: .5rem;
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #ccc;
        }
        .con ul li img {
            width: .8rem;
            height: .8rem;
            border-radius: .05rem;
            margin-right: .5rem;
            vertical-align: middle;
        }
        .con ul li i {
            display: inline-block;
            width: .8rem;
            height: .8rem;
            border-radius: .05rem;
            margin-right: .5rem;
            vertical-align: middle;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/info_def.png{$Think.config.RESOURCE_VER}) center no-repeat;
            background-size: .8rem .8rem;
        }
        .con ul li span {
            font-size: .24rem;
            color: #333;
            vertical-align: top;
            width: 2.5rem;
            text-align: center;
            display: inline-block;
        }
        .con ul li a {
            font-size: .24rem;
            color: #333;
            vertical-align: top;
            width: .5rem;
            text-align: center;
            display: inline-block;
        }
        .con ul li span.wei {
            color: #a3a3a3;
        }
        .con ul li em {
            font-size: .24rem;
            color: #a3a3a3;
            display: inline-block;
            float: right;
        }
        .noMassage {
            text-align: center;
            font-size: .3rem;
            line-height: 1rem;
            color: #919191;
        }
    </style>
</head>
<body>
    <article>
        <h3>
            <a href="javascript:history.go(-1);"></a>
            社群信息
        </h3>
        <div class="top">
            <a href="javascript:;">
                <img src="{$Think.config.RESOURCEURL}wx_assets/commune/images/info_bj.png{$Think.config.RESOURCE_VER}" alt="" onclick="bj('{$results[0].id}','{$results[0].groupName}','{$results[0].countNumber}')">
            </a>
            <img src="{$Think.config.RESOURCEURL}wx_assets/commune/images/my_group.png{$Think.config.RESOURCE_VER}" alt="">
            <p><em>{$results[0].groupName}</em><i>{$results[0].countNumber}</i></p>
            <ul>
                <li>
                    <p>社群排名</p>
                    <em>{$results[0].myrank}</em>
                </li>
                <li>
                    <p>社群指数</p>
                    <em>{$results[0].group_figure}</em>
                </li>
            </ul>
            <div class="btn">
                <a href="{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=commune&method=comuneRankList">查看排行榜</a>
                <span onclick="share('{$results[0].id}')">群签到</span>
            </div>
        </div>
        <p>签到用户</p>
        <div class="con">
            <p class="clearfix">
                <span class="fl">用户信息</span>
                <span class="fr">签到时间</span>
            </p>
            <ul id="quns">

            </ul>
        </div>
    </article>
    <script>
        var baseUrl = '{$Think.config.SERVER_HOST}';
        function bj(id,name,count){
            var params = {"id":id,"groupname":name,"groupcount":count};
            params=encodeURIComponent(JSON.stringify(params));
            location.href= baseUrl+'call.html?customerId={$customerId}&module=commune&method=communeIndex&params='+params;
        }
        function share(id){
            var params = {"gid":id};
            params=encodeURIComponent(JSON.stringify(params));
            location.href= baseUrl+'call.html?customerId={$customerId}&module=commune&method=communeSign&params='+params;
        }
    </script>
    <script type="text/html" id="Tpl">
        <%if(results.code!=0){%>
        <%for(var i=0;i<results.length;i++){
        var qun = results[i];
        %>
        <li>
            <a><%=qun.listnum%>.</a>
            <%if((qun.status == 'sharesubscribe') || (qun.status == 'unsubscribe')){%>
                    <i></i>
                    <span class="wei">该用户未关注公众号</span>
                    <em><%=qun.tran_time%></em>

            <%}else{%>
                    <img src="<%=qun.headimgurl%>" alt="">
                    <span><%=qun.nickname%></span>
                    <em><%=qun.tran_time%></em>
            <%}%>
        </li>
        <%}}else{%>
        <div class="noMassage">暂无活跃用户</div>
        <%}%>
    </script>
    <script>
        var baseUrl = '{$Think.config.SERVER_HOST}';
        var url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
        var p = $.util.getParamAsObject();
        var quns={
            pageSize:10,
            page:0,
            num:0,
            pageCount:0,
            init:function(){
                var me=this;
                this._initEvent();
                $.util.pageLoading.show();
                me._loadList(me.page,function(){
                    $.util.pageLoading.hide();
                });
            },
            _initEvent:function(){
                var me=this;
                $.util.initDataLoading({
                    me:quns,
                    lastChildren:function(){
                        return $("#quns li:last");
                    },
                    page:function(){
                        return quns.page;
                    },
                    pageCount:function(){
                        return quns.pageCount;
                    }
                });
            },
            _renderList:function(data,page,callback){
                var me=this;
                if(data){
                    var html=template("Tpl", data),
                            container = $("#quns");
                    container.append(html);
                    me.page=page+quns.pageSize;
                    me.pageCount=data.total;
                    callback && callback();
                }
            },
            _loadList:function(page,callback){
                var me=this;
                var data={
                    "start":quns.page,
                    "limit":quns.pageSize,
                    "id": p.id||""
                };
                $.ajax({
                    type: 'get',
                    url: baseUrl + 'call.json?customerId={$customerId}',
                    dataType: 'json',
                    data:{
                        'module':"commune",
                        "method":"communeHotUserList",
                        "params":JSON.stringify(data)
                    },
                    success: function(data){
                        if(data){
                            me._renderList(data,page,callback);
                        }
                        $.util.pageLoading.hide();
                    },
                    error: function(xhr, type){
//            alert('Ajax error!')
                    }
                })
            }
        }
        quns.init();
    </script>
</body>
</html>